import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import Pagination from 'rc-pagination';
import officialChannelAction from '../../actions/officialChannelAction.js';
import Widget from '../mui/Widget.js';
import SearchInput from '../mui/searchInput.js';

const ChannelList = React.createClass({
  render() {
    return (
      <tbody>
      {
        this.props.List && this.props.List.map((item, index) =>
          <tr key={index}>
            <td>{item.clsno}</td>
            <td>{item.name}</td>
            <td>{item.ver}</td>
            <td className="text-left"><pre className="pre-remark">{item.remark}</pre></td>
            <td>
              {
                item.status ?
                  <Link to={`/official/channel/edit/${item._id}`} activeClassName="active">编辑</Link>
                :
                  <span className="color-red">已冻结</span>

              }
            </td>
            <td className="pd0">
              {
                item.status ?
                  <Link to={`/official/channel/push/${item._id}`} activeClassName="active">发布至此渠道</Link>
                :
                  <span className="disable-message">发布至此渠道</span>
              }
            </td>
          </tr>
        )
      }
      </tbody>
    );
  }
});

const Channel = React.createClass({
  getInitialState() {
    return {
      pageList: []
    };
  },
  componentWillMount() {
    const data = {
      keyword: '',
      page: 1,
      page_size: 15
    };
    const { fetchChannelList } = this.props;
    fetchChannelList(data);
  },
  // componentWillReceiveProps(nextProps) {
  //   this.setState({ pageList: nextProps.testPackageList.data });
  // },
  search(target) {
    this.searchValue = target.value;
    const data = {
      keyword: target.value,
      page_size: 15
    };
    const { fetchChannelList } = this.props;
    fetchChannelList(data);
  },
  pagination(pageNumber) {
    const data = {
      page: pageNumber,
      keyword: this.searchValue,
      page_size: 15
    };
    const { fetchChannelList } = this.props;
    fetchChannelList(data);
  },
  render() {
    const pages = this.props.channelData.pages * 10 || 0;
    const { channelData } = this.props;
    return (
      <div>
        <Widget widgetHeader={'正式渠道列表'} />
        <div className="widget-body">
          <div className="mw400">
            <Link to="/official/channel/new" className="btn btn-primary w160"><span>添加渠道</span></Link>
            <div className="pull-right">
              <SearchInput placeholder={"渠道名、渠道识别码"} onSearch={this.search} />
            </div>
          </div>
          <table className="table table-hover">
            <thead>
              <tr>
                <th className="mw160">渠道ID</th>
                <th className="mw210">渠道名</th>
                <th className="mw250">渠道识别码</th>
                <th className="mw560">渠道备注</th>
                <th className="mw140">操作</th>
                <th className="mw100">发布</th>
              </tr>
            </thead>
            <ChannelList List={channelData.data} />
          </table>
          <div className="mt50 mb100">
            <Pagination className="ant-pagination" defaultCurrent={1} current={channelData.page} total={pages} onChange={this.pagination} />
          </div>
        </div>
      </div>
    );
  }
});

const mapStateToProps = function (state) {
  return {
    channelData: state.officialChannel.channelData,
  };
};
// export default TestPackage
module.exports = connect(mapStateToProps, officialChannelAction)(Channel);
